<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='./lib/mapbox-gl.css' rel='stylesheet' />
    <link href='./style/map.css' rel='stylesheet' />
    <script src='./lib/mapbox-gl.js'></script>
    <script src='./lib/proj4.min.js'></script>
    <script src='./js/typhoon-mapbox.js'></script>
    <title>mapboxgl typhoon</title>
</head>
<body>
<div id="map" class="map">
    <div class="tools">
        <button id="addty202204">添加202204</button>
        <button id="delty202204">移除202204</button>
        <button id="addty202203">添加202203</button>
        <button id="delty202203">移除202203</button>
    </div>
</div>
<script type="text/javascript">
    const dom = document.getElementById('map')
    const style = {
        name: 'my-style',
        version: 8,
        sources: {
            'amap-vec': {
                type: 'raster',
                "scheme": "xyz",
                "tileSize": 256,
                tiles: [
                    'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                ]
            }
        },
        layers: [
            {
                id: 'amap-vec',
                type: 'raster',
                source: 'amap-vec'
            }
        ]
    }

    const map = new mapboxgl.Map({
        container: dom, // container ID
        style,
        center: [103.7525436220991, 37.06996123670274], // starting position [lng, lat]
        zoom: 3.3, // starting zoom
        doubleClickZoom: true,
        dragPan: true,
        hash: false
    });

    let typhoonPlayer = null
    map.on('load', () => {
        typhoonPlayer = new TyphoonPlayer(map)
    })

    document.getElementById('addty202204').onclick = () => {
        typhoonPlayer.addTyphoon('202204')
    }
    document.getElementById('delty202204').onclick = () => {
        typhoonPlayer.dropTyphoon('202204')
    }

    document.getElementById('addty202203').onclick = () => {
        typhoonPlayer.addTyphoon('202203')
    }
    document.getElementById('delty202203').onclick = () => {
        typhoonPlayer.dropTyphoon('202203')
    }
</script>
</body>
</html>